<template>
  <div class="faq-accordion">
    <!-- 搜索框 -->
    <div v-if="showSearch" class="search-box">
      <el-input
        v-model="searchQuery"
        :placeholder="searchPlaceholder"
        clearable
        @input="handleSearch"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>

    <!-- 分组手风琴 -->
    <template v-if="hasGroups">
      <el-collapse
        v-model="activeGroups"
        class="faq-groups"
        :accordion="groupAccordion"
      >
        <el-collapse-item
          v-for="group in filteredGroups"
          :key="group.id"
          :title="group.title"
          :name="group.id"
        >
          <template #title>
            <div class="group-title">
              <span>{{ group.title }}</span>
              <span class="group-count">({{ group.items.length }})</span>
            </div>
          </template>

          <el-collapse v-model="activeItems" :accordion="itemAccordion">
            <el-collapse-item
              v-for="item in group.items"
              :key="item.id"
              :title="item.question"
              :name="item.id"
            >
              <template #title>
                <div class="item-question">
                  <el-icon><QuestionFilled /></el-icon>
                  <span>{{ item.question }}</span>
                </div>
              </template>
              <div class="item-answer">
                <el-icon><InfoFilled /></el-icon>
                <div class="answer-content" v-html="item.answer"></div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-collapse-item>
      </el-collapse>
    </template>

    <!-- 单个问题手风琴 -->
    <template v-else>
      <el-collapse
        v-model="activeItems"
        class="faq-items"
        :accordion="itemAccordion"
      >
        <el-collapse-item
          v-for="item in filteredItems"
          :key="item.id"
          :title="item.question"
          :name="item.id"
        >
          <template #title>
            <div class="item-question">
              <el-icon><QuestionFilled /></el-icon>
              <span>{{ item.question }}</span>
            </div>
          </template>
          <div class="item-answer">
            <el-icon><InfoFilled /></el-icon>
            <div class="answer-content" v-html="item.answer"></div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </template>

    <!-- 无数据展示 -->
    <el-empty v-if="isEmpty" description="暂无相关问题" />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { Search, QuestionFilled, InfoFilled } from "@element-plus/icons-vue";

const props = defineProps({
  items: {
    type: Array,
    default: () => [],
  },
  groups: {
    type: Array,
    default: () => [],
  },
  showSearch: {
    type: Boolean,
    default: true,
  },
  searchPlaceholder: {
    type: String,
    default: "搜索常见问题",
  },
  groupAccordion: {
    type: Boolean,
    default: false,
  },
  itemAccordion: {
    type: Boolean,
    default: true,
  },
});

// 搜索相关
const searchQuery = ref("");
const handleSearch = () => {
  activeGroups.value = [];
  activeItems.value = [];
};

// 激活状态
const activeGroups = ref([]);
const activeItems = ref([]);

// 是否有分组
const hasGroups = computed(() => props.groups && props.groups.length > 0);

// 过滤后的分组
const filteredGroups = computed(() => {
  if (!searchQuery.value) return props.groups;

  return props.groups
    .map((group) => ({
      ...group,
      items: group.items.filter(
        (item) =>
          item.question
            .toLowerCase()
            .includes(searchQuery.value.toLowerCase()) ||
          item.answer.toLowerCase().includes(searchQuery.value.toLowerCase()),
      ),
    }))
    .filter((group) => group.items.length > 0);
});

// 过滤后的问题列表
const filteredItems = computed(() => {
  if (!searchQuery.value) return props.items;

  return props.items.filter(
    (item) =>
      item.question.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      item.answer.toLowerCase().includes(searchQuery.value.toLowerCase()),
  );
});

// 是否为空
const isEmpty = computed(() => {
  if (hasGroups.value) {
    return filteredGroups.value.length === 0;
  }
  return filteredItems.value.length === 0;
});
</script>

<style lang="scss" scoped>
.faq-accordion {
  @apply w-full;

  .search-box {
    @apply mb-6;
  }

  .faq-groups,
  .faq-items {
    @apply bg-white rounded-lg overflow-hidden;

    :deep(.el-collapse-item__header) {
      @apply font-medium;
    }
  }

  .group-title {
    @apply flex items-center;

    .group-count {
      @apply ml-2 text-sm text-gray-500;
    }
  }

  .item-question {
    @apply flex items-center text-gray-700;

    .el-icon {
      @apply mr-2 text-primary-600;
    }
  }

  .item-answer {
    @apply flex text-gray-600 mt-2;

    .el-icon {
      @apply mr-2 text-success-600 mt-1;
    }

    .answer-content {
      @apply flex-1;

      ::v-deep(p) {
        @apply mb-4 last:mb-0;
      }

      ::v-deep(ul) {
        @apply list-disc pl-4 mb-4;
      }

      ::v-deep(ol) {
        @apply list-decimal pl-4 mb-4;
      }

      ::v-deep(a) {
        @apply text-primary-600 hover:text-primary-700 underline;
      }
    }
  }
}
</style>
